<div class="breadcrumbwidget">
	<ul class="skins">
        <li><a href="default" class="skin-color default"></a></li>
        <li><a href="orange" class="skin-color orange"></a></li>
        <li>&nbsp;</li>
        <li class="fixed"><a href="" class="skin-layout fixed"></a></li>
        <li class="wide"><a href="" class="skin-layout wide"></a></li>
    </ul><!--skins-->
	<ul class="breadcrumb">
        <li><a href="">Home</a> <span class="divider">/</span></li>
        <li class="active">G-People</li>
    </ul>
</div><!--breadcrumbwidget-->
<div class="pagetitle">
	<h1>Thiết lập Slider</h1> <span></span>
</div><!--pagetitle-->

<div class="maincontent">
<?php if(validation_errors()): ?>
    <div class="alert alert-error" style="margin: 10px 10px 10px 40px;">
      <button data-dismiss="alert" class="close" type="button">×</button>
      <?php echo validation_errors(); ?>
    </div>
<?php endif;?>
	<div class="contentinner content-dashboard">
    
    <?php $attr = array('class' => 'stdform'); echo form_open('', $attr)?>
        <input type="hidden" name="count_slides" id="count_slides" value="<?php echo count((array)json_decode($data['slides']));?>" />
        <p>
            <?php foreach(json_decode($data['slides']) AS $key=>$value):
                if($value->id == '1'):?>
                    <span class="box-rpg">
                        <span class="field">
                            <img src="<?php echo $imgbase.$value->image?>" id="show_id_<?php echo $value->id?>" style="display: inline-block; vertical-align: middle;width: 69px;height: 69px;border: 1px solid #CCC;background: #CCC;" />
                            <input type="hidden" name="slides_id_<?php echo $value->id?>" id="slides_id_<?php echo $value->id?>" value="" />
                            <input type="hidden" name="slides_verify_id_<?php echo $value->id?>" id="slides_verify_id_<?php echo $value->id?>" value="<?php echo $value->image?>" />
                            <input class="check" type="hidden" name="slides_check_id_<?php echo $value->id?>" id="slides_check_id_<?php echo $value->id?>" value="<?php echo $value->image?>" />
                            <input class="uniform-file" type="file" name="slides_uploads" id="upload_id_<?php echo $value->id?>" onchange="convertimage('upload_id_<?php echo $value->id?>', 'slides_id_<?php echo $value->id?>', 'show_id_<?php echo $value->id?>', 'slides_check_id_<?php echo $value->id?>');" value="" />
                            
                            <input type="text" name="url_slides_id_<?php echo $value->id?>" class="input-xlarge" placeholder="Đường dẫn" value="<?php echo $value->url?>"/>
                            <button class="btn btn-rounded plus_slides" type="button"> <i class="icon-plus"></i></button>
                        </span>
                    </span>
                <?php else: ?>
                    <span class="box-rpg">
                        <span class="field">
                            <img src="<?php echo $imgbase.$value->image?>" id="show_id_<?php echo $value->id?>" style="display: inline-block; vertical-align: middle;width: 69px;height: 69px;border: 1px solid #CCC;background: #CCC;" />
                            <input type="hidden" name="slides_id_<?php echo $value->id?>" id="slides_id_<?php echo $value->id?>" value="" />
                            <input type="hidden" name="slides_verify_id_<?php echo $value->id?>" id="slides_verify_id_<?php echo $value->id?>" value="<?php echo $value->image?>" />
                            <input class="check" type="hidden" name="slides_check_id_<?php echo $value->id?>" id="slides_check_id_<?php echo $value->id?>" value="<?php echo $value->image?>" />
                            <input class="uniform-file" type="file" name="slides_uploads" id="upload_id_<?php echo $value->id?>" onchange="convertimage('upload_id_<?php echo $value->id?>', 'slides_id_<?php echo $value->id?>', 'show_id_<?php echo $value->id?>', 'slides_check_id_<?php echo $value->id?>');" value="" />
                            
                            <input type="text" name="url_slides_id_<?php echo $value->id?>" class="input-xlarge" placeholder="Đường dẫn" value="<?php echo $value->url?>"/>
                            <button class="btn btn-rounded plus_slides" type="button"> <i class="icon-plus"></i></button>
                            <a class="remove_slides" href=""> <i class="iconfa-remove"></i></a>
                        </span>
                    </span>
                <?php endif;?>
            <?php endforeach;?>
        </p>
        <p>
            <label></label>
            <button class="btn btn-rounded" type="submit"> <i class="iconfa-ok"></i> &nbsp; Lưu</button>
        </p>
    </form>
    
    </div>
</div>


<style type="text/css">
    .box-rpg .plus_slides{
        display: none;
    }
    .box-rpg:last-of-type .plus_slides{
        display: inline-block;
    }
</style>

<script>

function convertimage(id, id_parse, img_show, check_image)
{
    var id = id;
    var id_parse = id_parse;
    var img_show = img_show;
    var check_image = check_image;
    var filesSelected = document.getElementById(id).files;
    if (filesSelected.length > 0)
    {
        var fileToLoad = filesSelected[0];

        var fileReader = new FileReader();

        fileReader.onload = function(fileLoadedEvent) 
        {
            $("#"+id_parse).attr('value', fileLoadedEvent.target.result);
            $("#"+check_image).val('1');
            //document.getElementById('cddd').html(fileLoadedEvent.target.result);
            $("#"+img_show).attr('src', fileLoadedEvent.target.result);
        };

        fileReader.readAsDataURL(fileToLoad);
    }
}

$(document).ready(function(){
    var n = parseInt($('#count_slides').attr('value'));
    $(document).on('click', '.plus_slides', function(){
        n = n + 1;
        $('#count_slides').attr('value', n);
        var html = '<span class="box-rpg">\n\
                <span class="field">\n\
                    <img src="" id="show_id_'+n+'" style="display: inline-block; vertical-align: middle;width: 69px;height: 69px;border: 1px solid #CCC;background: #CCC;" />\n\
                    <input type="hidden" name="slides_id_'+n+'" id="slides_id_'+n+'" value="" />\n\
                    <input type="hidden" name="slides_verify_'+n+'" id="slides_verify_'+n+'" value="" />\n\
                    <input class="check" type="hidden" name="slides_check_id_'+n+'" id="slides_check_id_'+n+'" value="" />\n\
                    <span class="uploader" id="uniform-img_'+n+'"><input class="uniform-file" type="file" name="slides_uploads" id="upload_id_'+n+'" onchange="convertimage(\'upload_id_'+n+'\', \'slides_id_'+n+'\', \'show_id_'+n+'\', \'slides_check_id_'+n+'\');" value="" size="19" style="opacity: 0;"/><span class="filename">No file selected</span><span class="action">Choose File</span></span>\n\
                    \n\
                    <input type="text" name="url_slides_id_'+n+'" class="input-xlarge" placeholder="Đường dẫn" value=""/>\n\
                    <button class="btn btn-rounded plus_slides" type="button"> <i class="icon-plus"></i></button>\n\
                    <a class="remove_slides" href=""> <i class="iconfa-remove"></i></a>\n\
                </span>\n\
                </span>';
            //$(html).insertAfter($(this).parents('p'));
            $(this).parents('p').append(html);
        return false;
    });
    
    jQuery(document).on('click', '.remove_slides', function(){
        ele = jQuery(this);
        val = jQuery(this).parent().find('input.check').attr('value');
        //alert(val);
        if(val != '')
        {
            jConfirm('Thao tác này sẽ xóa ảnh. Bạn có chắc chắn muốn xóa?', 'Xác nhận', function(r) {
        		if(r == true)
                {
                    $.ajax({
                        type: "GET",
            		    url: baseUrl+'manage/slides/delete-slides-ajax',
                        data: ({path : val})
            		});
                
                    ele.parents('span.box-rpg').fadeOut(function(){
            			jQuery(this).remove();
            		});
                }
            });   
        }else{
            jQuery(this).parents('span.box-rpg').fadeOut(function(){
    			jQuery(this).remove();
    		});
        }
        return false;
    });
    //$('#count_slides').attr('value', n);
});

</script>